<template>
  <div class="detailContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <div style="display: flex; justify-content: space-between">
            <div class="infoContainer">
              <div class="title">
                <span class="name">{{ detailData.name }}</span>
                <span class="id">{{ detailData.id }}</span>
              </div>
              <div class="detailInfo">
                <div class="createInfo">
                  <span style="font-size: 15px"
                    >创建人：<span style="font-size: 14px; color: #969696">{{
                      detailData.creator
                    }}</span></span
                  >
                  <span style="font-size: 15px; margin-left: 20px"
                    >创建时间：<span style="font-size: 14px; color: #969696">{{
                      detailData.createTime
                    }}</span></span
                  >
                </div>
                <div class="updateInfo">
                  <span style="font-size: 15px"
                    >更新人：<span style="font-size: 14px; color: #969696">{{
                      detailData.updater
                    }}</span></span
                  >
                  <span style="font-size: 15px; margin-left: 20px"
                    >更新时间：<span style="font-size: 14px; color: #969696">{{
                      detailData.updateTime
                    }}</span></span
                  >
                </div>
              </div>
              <div class="buttonGroup" style="margin-top: 20px">
                <el-button
                  type="primary"
                  plain
                  style="width: 80px"
                  v-show="activeIndex == '1'"
                  >编辑</el-button
                >
                <el-button
                  type="primary"
                  plain
                  style="width: 80px"
                  v-show="activeIndex == '1'"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  plain
                  style="width: 80px"
                  v-show="activeIndex == '1'"
                  >确认出库</el-button
                >
                <el-button type="primary" plain style="width: 80px"
                  >打印</el-button
                >
              </div>
            </div>
            <div class="imgShow">
              <img
                style="width: 80px"
                :src="`/public/entranceImgs/${
                  detailData.status == '未出库'
                    ? 'noEntrance.png'
                    : 'entrance.png'
                }`"
                alt=""
              />
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">基础信息</el-menu-item>
            <el-menu-item index="2">物料清单</el-menu-item>
          </el-menu>
          <div class="basicBody">
            <div class="basicInfoContainer" v-if="activeIndex == '1'">
              <el-descriptions style="width: 100%" column="2" label-width="120">
                <el-descriptions-item label="领料单编号">{{
                  detailData.requisitionCode
                }}</el-descriptions-item>
                <el-descriptions-item label="领料单名称">{{
                  detailData.requisitionName
                }}</el-descriptions-item>
                <el-descriptions-item label="领料日期">{{
                  detailData.requisitionDate
                }}</el-descriptions-item>
                <el-descriptions-item label="领料人">{{
                  detailData.receiver
                }}</el-descriptions-item>
                <el-descriptions-item label="工单名称">{{
                  detailData.workOrderName
                }}</el-descriptions-item>
                <el-descriptions-item label="工单编号">{{
                  detailData.workOrderCode
                }}</el-descriptions-item>
                <el-descriptions-item label="工艺路线">{{
                  detailData.processRoute
                }}</el-descriptions-item>
                <el-descriptions-item label="工序名称">{{
                  detailData.procedureName
                }}</el-descriptions-item>
                <el-descriptions-item label="任务名称">{{
                  detailData.taskName
                }}</el-descriptions-item>
                <el-descriptions-item label="任务编号">{{
                  detailData.taskCode
                }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                  detailData.remark
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div v-else style="padding: 20px">
              <el-button plain type="primary" style="width: 80px"
                >导出</el-button
              >
              <el-table style="margin-top: 20px" :data="tableData">
                <el-table-column
                  type="selection"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="序号"
                  type="index"
                  width="60"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="物料名称"
                  width="90"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="物料编号"
                  width="90"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="规格型号"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column label="单位" align="center"></el-table-column>
                <el-table-column
                  label="领用数量"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="批次号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="仓库名称"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="库区名称"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="库位名称"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="备注"
                  width="200"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>

  <script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { MaterialRequisitionItem } from "@/api/ProductPicking/res";
import { getMaterialRequisitionDetail } from "@/api/ProductPicking";
import { ElMessage } from "element-plus";
const $router = useRouter();
let activeIndex = ref("1");

//mockData
let detailData = ref<MaterialRequisitionItem>({
  objectId: "", // 唯一标识
  requisitionName: "", // 领料单名称
  requisitionCode: "", // 领料单编号
  requisitionDate: "", // 领料日期
  receiver: "", // 领料人
  workOrderName: "", // 工单名称
  workOrderCode: "", // 工单编号
  taskName: "", // 任务名称
  taskCode: "", // 任务编号
  processRoute: "", // 工艺路线
  procedureName: "", // 工序名称
  materialInfo: "", // 物料信息 (JSON字符串)
  totalQuantity: "", // 领料总数
  remark: "", // 备注
  status: "", // 状态 (未出库,已出库)
  createdAt: "", // 创建时间
  updatedAt: "", // 更新时间
});

let tableData = ref([{}]);
const $route = useRoute();
const isFooterVisible = ref(false);
const close = () => {
  $router.replace("/storage/entrance/material");
};
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = keyPath[0];
};

onMounted(async () => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
  try {
    const res: MaterialRequisitionItem = await getMaterialRequisitionDetail(
      $route.query.objectId as string
    );
    detailData.value = res;
  } catch (err: any) {
    ElMessage({ type: "error", message: err.message });
  }
});
</script>

  <style scoped lang="scss">
.detailContainer {
  transform: translate(0);
  width: 100%;
  position: relative;
  height: 100%;
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer {
      padding: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>
